<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div :class="color">这是一个可以变化的盒子</div>
			{{ num + 1 }}
			<div @click="outter" class="outter">
				<p v-if="out">外层</p>
				<div @click.stop="inner" v-if="inner" class="inner">
					内层
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					color: 'red',
					num: 10,
					out: 'true',
					inner: 'true'
				},
				methods:{
					outter(){
						this.out = !this.out;
					},
					inner(){
						this.inner = !this.inner;
					}
				}
			})
		</script>
		<style type="text/css">
			.blue{
				color: #0000FF;
			}
			.red{
				color: #FF0000;
			}
		</style>
	</body>
</html>
